<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/jsp/taglibs-struts2.jsp" %>

<script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>

<form name="createOrderForm" action="flightOrderAction!createSelfOrder.action" method="post">

<c:forEach var="entry" items="${flightDetailMap}">
<input type="hidden" name="${entry.key}" value="${entry.value}"/>
</c:forEach>

<div class="right">
<div class="right600"><img src="<c:url value="/images/a01.jpg"/>"/></div>
<div class="right600b"><h2><img src="<c:url value="/images/r101.jpg"/>"/></h2><h2 class="r101"/><h2><img src="<c:url value="/images/r103.jpg"/>"/></h2></div>

<div id="passengerDiv">
<c:forEach begin="1" end="${passengersNum}" step="1" varStatus="status">
<div id="p1Div">
<div class="r303">乘机人<c:out value="${status.index}"/></div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>姓名：</h3>
  <h2>名<input name="firstname_<c:out value="${status.index}"/>" type="text" size="30"/>姓<input name="lastname_<c:out value="${status.index}"/>" type="text" size="30"/>
</h2></div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>称呼：</h3>
  <h2><select size="1" name="title_<c:out value="${status.index}"/>">
  	<option value="MR">MR</option><option value="MS">MS</option><option value="CHD">CHD</option><option value="SD">SD</option>
  </select>
</h2></div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>性别：</h3>
  <h2><select class="r304" name="sex_<c:out value="${status.index}"/>">
  	<option value="M">男</option>
  	<option value="F">女</option>
  </select>
</h2></div>
<div class="rightk">
  <h3>证件类型：</h3>
  <h2><select class="r304" name="idType_<c:out value="${status.index}"/>">
  <option value="passport">护照</option>
  <option value="HkM">港澳通行证</option>
</select>
</h2></div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>证件号：</h3>
  <h2><input name="idCode_<c:out value="${status.index}"/>" type="text" size="30"/>
</h2></div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>证件有效期：</h3>
  <h2><input name="validityTime_<c:out value="${status.index}"/>" type="text" onfocus="HS_setDate(this)" style="width: 100px;"/>
</h2>
</div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>国籍：</h3>
  <h2><input name="nationality_<c:out value="${status.index}"/>" type="text" size="30"/>
</h2></div>
<div class="rightk">
  <h3>出生日期日期：</h3>
  <h2><input name="birthday_<c:out value="${status.index}"/>" type="text" onfocus="HS_setDate(this)" style="width: 100px;"/>
</h2>
</div>
<div>
</div>
</div>
</c:forEach>
</div>

<%--<div><input type="button" name="addPassenger" value="添加乘机人" onclick="addPassengerUI()"/></div>--%>

<script type="text/javascript">
var pN = 1;
var pDiv = $('passengerDiv');
function addPassengerUI() {
var newDiv = document.createElement("div");
pN ++;
newDiv.setAttribute("id", "p" + pN + "Div");
newDiv.innerHTML = [
"<div class='r303'>乘机人" + pN + "</div>",
"<div class='rightk'>",
  "<h3><font color='#cc0000'>*</font>姓名：</h3>",
  "<h2><input name='name_" + pN + "' type='text' size='30'/>",
"</h2></div>",
"<div class='rightk'>",
  "<h3><font color='#cc0000'>*</font>性别：</h3>",
  "<h2>",
    "<select class='r304' name='sex_" + pN + "'>",
    "<option value='M'>男</option>",
    "<option value='F'>女</option>",
  "</select>",
"</h2></div>",
"<div class='rightk'>",
  "<h3>证件类型：</h3>",
  "<h2><select class='r304' name='idType_" + pN + "'>",
  "<option value='passport'>护照</option>",
  "<option value='HkM'>港澳通行证</option>",
"</select>",
"</h2></div>",
"<div class='rightk'>",
  "<h3><font color='#cc0000'>*</font>证件号：</h3>",
  "<h2><input name='idCode_" + pN + "' type='text' size='30'/>",
"</h2></div>",
"<div class='rightk'>",
  "<h3><font color='#cc0000'>*</font>证件有效期：</h3>",
  "<h2><input name='validityTime_" + pN + "' type='text' onfocus='HS_setDate(this)' style='width: 100px;'/>",
"</h2>",
  "<h2></h2>",
  "<h2></h2>",
"</div>",
"<div class='rightk'>",
  "<h3><font color='#cc0000'>*</font>国籍：</h3>",
  "<h2><input name='nationality_" + pN + "' type='text' size='30'/>",
"</h2></div>",
"<div class='rightk'>",
  "<h3>出生日期日期：</h3>",
  "<h2><input type='text' name='birthday_" + pN + "' onfocus='HS_setDate(this)' style='width: 100px;'/>",
"</h2>",
  "<h2></h2>",
  "<h2></h2>",
"</div>",
"<div>",
"</div>"
].join("");

pDiv.appendChild(newDiv);
}
</script>

<div class="r303">联系人信息</div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>联系人姓名：</h3>
  <h2><input type="text" name="contactName" size="30"/>
</h2></div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>联系人电话：</h3>
  <h2><input type="text" name="contactTel" size="30"/>
</h2></div>
<div class="rightk">
  <h3><font color="#cc0000">*</font>联系人MSN：</h3>
  <h2><input type="text" name="contactMsn" size="30"/>
</h2></div>

<div style="height: 20px"><h2><img height="22" width="90" src="<c:url value="/images/t03.jpg"/>" onclick="createOrder()"/></h2>
<h2><img height="20" width="60" src="<c:url value="/images/t04.jpg"/>"/></h2>
</div>

</div>
</form>

<script type="text/javascript">
function createOrder() {
  window.document.createOrderForm.submit();
}
</script>